import { Button, Card, Form, Input, Modal, Select, Space, Table } from 'antd'
import React, { useEffect, useState } from 'react'
import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons';
import { getMenuList, remove, update, save, type ChildrenModel } from '@/api/menu'
export default function Menu() {
  let [menuData, setMenuData] = useState<ChildrenModel[]>([])
  let [isModalOpen, setIsModalOpen] = useState(false);
  let [form] = Form.useForm();
  let [paramsData, setParamsData] = useState({
    id: '',
    level: 0,
    pid: '',
    type: 1
  });
  let [inputVisible, setInputVisible] = useState(false)
  let showModal = () => {
    setIsModalOpen(true);
  };

  let handleOk = async () => {
    setIsModalOpen(false);
    let fields = form.getFieldsValue();
    let formData = {
      ...paramsData,
      ...fields
    }
    if(formData.id) {
      await update(formData)
    } else {
      await save(formData)
    }
    getMenuData();
    setInputVisible(false)
  };

  let handleCancel = () => {
    setIsModalOpen(false);
    setInputVisible(false)
  };

  let layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
  };
  let columns = [
    {
      title: '名称',
      dataIndex: 'name',
    },
    {
      title: '权限值',
      dataIndex: 'code',
    },
    {
      title: '跳转权限值',
      dataIndex: 'toCode',
    },
    {
      title: '操作',
      render: (value: any, row: any, index: number) => {
        return (
          <Space>
            {/* 新增 */}
            <Button
              icon={<PlusOutlined />}
              size="middle"
              disabled={value.type === 2}
              style={{ backgroundColor: 'blue', color: '#fff' }}
              onClick={() => {
                if(value.level === 3) {
                  setInputVisible(true)
                }
                form.setFieldsValue({
                  name: '',
                  code: '',
                  toCode: ''
                })
                showModal()
                setParamsData({
                  id: '',
                  level: value.level + 1,
                  type: value.level === 3 ? 2 : 1,
                  pid: value.id
                })
              }}
            ></Button>
            {/* 编辑 */}
            <Button
              icon={<FormOutlined />}
              size="middle"
              disabled={value.level === 1}
              style={{ backgroundColor: 'blue', color: '#fff' }}
              onClick={() => {
                if(value.type === 2) {
                  setInputVisible(true)
                }
                showModal();
                form.setFieldsValue({
                  ...value
                })
                setParamsData({
                  id: value.id,
                  pid: value.pid,
                  level: value.level,
                  type: value.type
                })
                
              }}
            ></Button>
            {/* 删除 */}
            <Button
              icon={<DeleteOutlined />}
              size="middle"
              disabled={value.level == "1"}
              style={{ backgroundColor: 'red', color: '#fff' }}
              onClick={async () => {
                await remove(value.id)
                getMenuData();
              }}
            ></Button>
          </Space>
        )
      },
    }
  ]
  let getMenuData = async () => {
    let result = await getMenuList()
    setMenuData(result.children)
  }
  useEffect(() => {
    getMenuData();
  }, [])
  return (
    <Card>
      <Table dataSource={menuData} columns={columns} bordered defaultExpandedRowKeys={['1']} rowKey="id" ></Table>
      <Modal
        title="添加菜单"
        visible={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        okText="确认"
        cancelText="取消"
      >
        <Form
          form={form}
          {...layout}
        >
          <Form.Item
            label="名称"
            name="name"
            rules={[{ required: true, message: '请输入名称' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="功能权限值"
            name="code"
            rules={[{ required: true, message: '请输入功能权限值' }]}
          >
            <Input />
          </Form.Item>
          {
           inputVisible && <Form.Item
            label="跳转路由权限值"
            name="toCode"
          >
            <Input />
          </Form.Item>
          }
        </Form>
      </Modal>
    </Card>
  )
}
